<template>
  <!--承运商在途跟踪-->
  <div class="tracking-index">
    <div class="tracking-body">
      <module-title context="在途跟踪"/>

      <div class="">
        <div class="tracking-table-menu">
          <el-select class="tracking-select"
                     v-model="pagination.value"
                     placeholder="收货人">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-input type="text"
                    style="width: 200px;margin-left: 30px"
                    v-model="pagination.input"
                    placeholder="请输入"/>
          <span style="margin-left: 30px">下单日期</span>
          <el-date-picker
              class="tracking-date-picker"
              style="margin-left: 10px"
              v-model="pagination.startTime"
              type="date"
              placeholder="选择开始日期">
          </el-date-picker>
          <span>&nbsp;- &nbsp;</span>
          <el-date-picker
              class="tracking-date-picker"
              style="margin-left: 10px"
              v-model="pagination.endTime"
              type="date"
              placeholder="选择结束日期">
          </el-date-picker>
          <el-button  class="tracking-search"
                      style="margin-left: 20px"
                      type="primary">搜索</el-button>
        </div>
        <el-table
            class="tracking-table"
            :data="tableData"
            stripe
            style="width: 100%">
          <el-table-column
              prop="address"
              label="选择"
              width="50">
            <template slot-scope="scope">
              <el-radio v-model="radioSelect"
                        :label="scope.row.id"
                        @change.native="handleRadioChange(scope.row)"
              >&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column
              prop="address"
              label="订单号"
              width="100">
          </el-table-column>
          <el-table-column
              prop="name"
              label="下单日期"
              width="100">
            <template slot-scope="scope">
              <div v-text="scope.row.date"></div>
              <div v-text="scope.row.time"></div>
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              label="运单号"
              width="100">
          </el-table-column>
          <el-table-column
              prop="address"
              label="收货方"
              width="100">
          </el-table-column>
          <el-table-column
              prop="address"
              label="收货人"
              width="100">
          </el-table-column>
          <el-table-column
              prop="address"
              label="始发地"
              width="100">
          </el-table-column>
          <el-table-column
              prop="address"
              label="目的地"
              width="100">
          </el-table-column>
          <el-table-column
              prop="address"
              label="车牌"
              width="100">
          </el-table-column>
          <el-table-column
              prop="address"
              label="运作状态"
              width="100">
          </el-table-column>
          <el-table-column
              prop="address"
              label="监控状态"
              width="90">
          </el-table-column>
          <el-table-column
              prop="time"
              label="计划发车时间"
              width="120">
            <template slot-scope="scope">
              <div v-text="scope.row.date"></div>
              <div v-text="scope.row.time"></div>
            </template>
          </el-table-column>
          <el-table-column
              prop="time"
              label="实际发车时间"
              width="120">
            <template slot-scope="scope">
              <div v-text="scope.row.date"></div>
              <div v-text="scope.row.time"></div>
            </template>
          </el-table-column>
          <el-table-column
              prop="time"
              label="预计到达时间"
              width="120">
            <template slot-scope="scope">
              <div v-text="scope.row.date"></div>
              <div v-text="scope.row.time"></div>
            </template>
          </el-table-column>
          <el-table-column
              prop="address"
              label="行驶速度km/h"
              width="110">
          </el-table-column>
          <el-table-column
              prop="time"
              label="跟踪时间"
              width="100">
            <template slot-scope="scope">
              <div v-text="scope.row.date"></div>
              <div v-text="scope.row.time"></div>
            </template>
          </el-table-column>
        </el-table>
        <module-pagination :page="pagination.page"
                           :page-size="pagination.pageSize"
                           :total="total"/>


        <div style="clear: both"></div>
      </div>
    </div>
  </div>
</template>

<script>
import ModuleTitle from "@/components/title/ModuleTitle";
import ModulePagination from "@/components/element/ModulePagination";
export default {
  name: "CarriersTracking",
  components: {ModulePagination, ModuleTitle},
  props: {
    ModuleTitle,
    ModulePagination,

  },
  data() {
    return {
      options: [{
        value: '收货人',
        label: '收货人'
      }, {
        value: '始发地',
        label: '始发地'
      }, {
        value: '目的地',
        label: '目的地'
      }, {
        value: '订单号',
        label: '订单号'
      }, {
        value: '运单号',
        label: '运单号'
      }],
      // 表格数据
      tableData: [
        {
          time: '10:10:10',
          date: '2021-10-10',
        },
        {
          time: '10:10:10',
          date: '2021-10-11',
        },
        {
          time: '10:10:10',
          date: '2021-10-12',
        },
      ],
      // 分页数据
      pagination:{
        value: '',
        input: '',
        startTime: '',
        endTime: '',
        page: 1,
        pageSize: 0,
      },
      total: 0,


      radioSelect:'', // 单选框绑定
    }
  },
  methods: {

    // 选择单选框
    handleRadioChange(row) {
      console.log(row)
    },


  }
}
</script>

<style scoped lang="scss">

.tracking-index {
  margin-top: 20px;
  width: 100%;
  text-align: left;


  .tracking-body {
    width: 99%;
    margin-left: 1%;
  }

  .tracking-select {
    margin-top: 5px;
  }

  .tracking-table-menu{
    width: 100%;
    float: left;
  }


  .tracking-table{
    float: left;
    margin-top: 20px;
  }


}


</style>